<script setup lang="ts">
import { Application, Loader, } from "vue3-pixi";
import textureUrl from "@/assets/logo.png";
import { Rectangle, Texture } from "pixi.js";
import { computed, reactive, ref, shallowReactive } from "vue";
import type { Graphics, IPointData } from "pixi.js";
import { Spritesheet } from "pixi.js";
import { useStateWithFetch } from "./hooks";
const hitArea = new Rectangle(0, 0, 64, 64);
const pos = ref<IPointData>({ x: 100, y: 100 })
const status = ref(1)
setTimeout(() => {
  status.value = 2
}, 2000);

function onClick() {
  console.log('sprite clicked!');
}
// const [sheet] = useStateWithFetch<Spritesheet|undefined>(undefined,async ()=>{
//   const res = await Assets.load('/assets/player/idle/left/idle.json')
//   await res.parse()
//   console.log(res);

//  return res;
// })

const loaded = ref(false)
const main = async () => {
  await resource.spritesheet.player.parse()
  loaded.value = true
}



main()

const atlasData = {
  frames: {
    walk_bottom_0: {
      frame: { x: 0, y: 0, w: 48, h: 48 },
    },
    walk_bottom_1: {
      frame: { x: 0, y: 48, w: 48, h: 48 },
    },
    walk_top_0: {
      frame: { x: 0, y: 48 * 2, w: 48, h: 48 },
    },
    walk_top_1: {
      frame: { x: 0, y: 48 * 3, w: 48, h: 48 },
    },
    walk_left_0: {
      frame: { x: 0, y: 48 * 4, w: 48, h: 48 },
    },
    walk_left_1: {
      frame: { x: 0, y: 48 * 5, w: 48, h: 48 },
    },
  },
  meta: {
    image: '/assets/Unit_mov1.png',
    format: 'RGBA8888',
    scale: 1
  },
  animations: {
    walk_top: ['walk_top_0', 'walk_top_1'],
    walk_left: ['walk_left_0', 'walk_left_1'],
    walk_bottom: ['walk_bottom_0', 'walk_bottom_1'],
    walk_right: ['walk_left_0', 'walk_left_1'],
  }
}

const resource = shallowReactive({
  spritesheet: {
    player: new Spritesheet(
      Texture.from(atlasData.meta.image),
      atlasData
    )
  },
  animation: undefined as undefined | Texture[],
})
const currentKey = ref('d')
const lastKey = ref(currentKey.value)
const idleing = ref(true)
const running = ref(false)
const runningDirection = ref<'w' | 'a' | 's' | 'd'>('w')
const turning = ref(false)
const attacking = ref(false)
const deathing = ref(false)
let attackTimer: NodeJS.Timeout
const attack = () => {
  if (attacking.value !== true) {
    attacking.value = true
    attackTimer = setTimeout(() => {
      idleing.value = true
      attacking.value = false
    }, 1000);
  }
}

const currentAction = computed(() => {
  const keyMap = {
    'w': 'top',
    's': 'bottom',
    'a': 'left',
    'd': 'right'
  } as const
  if (running.value) {
    return resource.spritesheet.player.animations[`walk_${keyMap[runningDirection.value]}`]
  }
  return resource.spritesheet.player.animations.walk_bottom
})
function onResolved(data: Record<string, Spritesheet>) {
}
const assets: Record<string, string> = {
}
const windowRef = window

const playerState = ref({
  playing: false,
  x: 0,
  y: 0
})
const map: number[][] = Array(10).fill(Array(10).fill(1));

const highLightPoint = new Set<Graphics>()

// let current: AnimatedSprite | null = null


interface Point {
    x: number;
    y: number;
}
let currentPos: number[] = []
</script>

<template>
  <Application :background="'#000000'" :resizeTo="windowRef">
    <container>
      <!-- <sprite  :texture="textureUrl" :hit-area="hitArea"/> -->
      <Loader @resolved="onResolved" :resources="{
        ...assets,
      }">
      <container>
       <template v-for="item,i in map">
        <template v-for="item1,j in item">
        <graphics></graphics>
        </template>
       </template>
      </container>
        <text :style="{ fill: 'white' }" v-if="status === 1">状态1</text>
        <text :style="{ fill: 'white' }" v-else>状态2</text>
        <animated-sprite @click="onClick" :loop="true" v-bind="playerState" :animation-speed="0.1"
          :anchor="0.5" :textures="currentAction">
        </animated-sprite>
      </Loader>
    </container>
  </Application>
</template>